<template>
	<b-container fluid="xl" class="app">
		<dt>客户案例</dt>
		<div class="tab">
			<ul>
				<li v-for="(item,key) in menu" :key="key" ref="tabLi" @click="activeTab(key)">
					{{item.title}}
				</li>
			</ul>
			<div class="border"></div>
			<div class="border-active" :style="{left: currentLeft + 'px'}"></div>
		</div>

		<b-container class="logo">
			<b-row cols="6">
				<b-col v-for="(item,key) in logo" :key="key"><img :src="item" alt=""></b-col>
			</b-row>
		</b-container>
	</b-container>
</template>

<script>
	export default {
		name: "CaseList",
		data () {
			return {
				menu: [
					{
						title: '行业客户'
					},
					{
						title: '视频'
					},
					{
						title: '电子商务'
					},
					{
						title: '金融科技'
					},
					{
						title: '教育科研'
					},
					{
						title: '游戏'
					}
				],
				logo: [
					require('../../assets/logo1.png'),
					require('../../assets/logo2.png'),
					require('../../assets/logo3.png'),
					require('../../assets/logo4.png'),
					require('../../assets/logo5.png'),
					require('../../assets/logo6.png'),
					require('../../assets/logo7.png'),
					require('../../assets/logo8.png'),
					require('../../assets/logo9.png')
				],
				currentLeft: 0
			}
		},
		methods: {
			activeTab (index) {
				this.currentLeft = this.$refs.tabLi[index].offsetLeft
			}
		}
	}
</script>

<style scoped lang="scss">
	.app {
		margin-top: 150px;
		dt {
			font-size: 68px;
			font-weight: 400;
		}
		.tab {
			margin-top: 60px;
			position: relative;
			ul {
				display: flex;
				li {
					font-size: 22px;
					flex: 1;
					text-align: center;
				}
			}
			.border-active {
				transition: all linear .2s;
				height: 3px;
				border-radius: 3px;
				background: #3553e2;
				width: 15%;
				position: absolute;
				bottom: 0;
			}
		}
		.logo {
			margin-top: 40px;
			.row {
				.col {
					line-height: 150px;
					img {
						width: 80%;
					}
				}
			}
		}
	}
</style>
